<template>
  <!-- 叠堆柱状 -->
  <div
    class="Radar"
    :id="eleId"
    :style="{ width: width + 'px', height: height + 'px' }"
  ></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Radar",
  props: {
    eleId: String,
    width: { type: Number, default: 500 }, //宽度
    height: { type: Number, default: 250 }, //高度
    legend: { type: Boolean, default: false }, //是否显示图例
    legendPosi: { type: Array, default: () => ["top", "right"] }, // 图例位置
    background: { type: String, default: "#010d3a" },
    source: {
      type: Object,
      default: () => {
        return {
          name: ["20以下", "21-30", "31-40"],
          series: [
            {
              data: [32, 58, 64],
            },
            {
              data: [32, 58, 64],
            },
            {
              data: [32, 58, 64],
            },
          ],
        };
      },
    }, //是否显示图例
    stack: { type: Boolean, default: false }, // 是否叠堆
    barBorderRadius: {
      type: Array,
      default: () => {
        return [0, 0, 0, 0];
      },
    }, // 是否圆角
    barWidth: { type: Number, default: 30 },
    title: { type: String, default: "" },
    remark: { type: String, default: "" },
    titlePosi: {
      type: Array,
      default: () => {
        return ["top", "left%"];
      },
    },
    color: {
      type: Array,
      default: () => {
        return ["#00A1FF", "#77A1FF", "#eeA1FF"];
      },
    },
    grid: {
      type: Object,
      default: () => {
        return {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true,
        };
      },
    },
  },
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.checkDomExist();
  },
  methods: {
    setOption() {
      this.options = {
        title: {
          text: this.title,
          subtext: this.remark,
          top: this.titlePosi[0],
          left: this.titlePosi[1],
          padding: 0,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          show: this.legend,
          data: this.source.series.map((v) => {
            return v.name;
          }),
          textStyle: {
            fontSize: 16, //字体大小
            color: "#ffffff", //字体颜色
          },
          x: this.legendPosi[1], //可设定图例在左、右、居中
          y: this.legendPosi[0], //可设定图例在上、下、居中
        },
        grid: this.grid,
        xAxis: {
          type: "category",
          data: this.source.name,
        },
        yAxis: {
          type: "value",
        },
        series: this.source.series.map((v, i) => {
          const stack = this.stack ? { stack: "total" } : {};
          return {
            name: this.source.name[i],
            type: "bar",
            barWidth: this.barWidth,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: this.barBorderRadius,
                color: this.color[i],
                label: { show: false },
              },
            },
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: v.data,
            ...stack,
          };
        }),
      };

      let chartDom = document.getElementById(this.eleId);
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.options);
    },
    checkDomExist() {
      if (this.eleId === undefined) {
        alert("请指定的eleId");
        return;
      }
      let chartDom = document.getElementById(this.eleId);
      if (chartDom !== null) {
        this.setOption();
      } else {
        // 如果取不到DOM，过会儿重试
        setTimeout(() => {
          this.checkDomExist();
        }, 200);
      }
    },
  },
};
</script>

<style scoped></style>
